import React, { useState, useEffect, useContext } from 'react';
import { View, StyleSheet, Dimensions, Image, Text } from 'react-native';
import CommonContext from '@/utils/createContext';
import { PayWithArray } from '@/config/config'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const ConfirmationDetail = () => {

    const { transcationDetail, isSignFinish, isSign, signAccounts, noSignAccounts, executor } = useContext(CommonContext);
    const [countData, setCountData] = useState({});

    useEffect(() => {
        if (transcationDetail && transcationDetail.txId) {
            let total = transcationDetail.detailedExecutionInfo.confirmationsRequired || NaN
            let signsCounts = transcationDetail.detailedExecutionInfo.confirmations?.length || NaN
            let noSignsCounts = NaN
            if (total && signsCounts) {
                noSignsCounts = total - signsCounts
            }
            setCountData({
                total,
                signsCounts,
                noSignsCounts
            })
        }
    }, [transcationDetail]);

    return (
        <View>
            {/* 已签名账户信息 */}
            {signAccounts && signAccounts.map((item, index) => {
                return (
                    <View key={index}>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <View style={styles.signProcess}>
                                <Image source={require('@/assets/safe/result.png')} style={{ width: 12 * ratio, height: 12 * ratio }} />
                            </View>
                            <Text style={{ ...styles.title2, color: '#0069F6' }}>Confirmed</Text>
                        </View>
                        <View style={{ flexDirection: 'row' }}>
                            <View style={styles.signProcess}>
                                <View style={{ ...styles.divider, height: 71 * ratio, backgroundColor: '#0069F6' }}></View>
                            </View>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <Image source={PayWithArray[item.profileImg]} style={{ width: 40 * ratio, height: 40 * ratio }} />
                                <View style={{ marginLeft: 7 * ratio, justifyContent: 'center' }}>
                                    <Text style={styles.title1}>{item.label}</Text>
                                    <Text ellipsizeMode="middle" numberOfLines={1}
                                        style={{ ...styles.title2, width: 178 * ratio }}>
                                        {item.address}
                                    </Text>
                                </View>
                            </View>
                        </View>
                    </View>
                )
            })}
            {/* 未签名账户信息 */}
            {noSignAccounts && noSignAccounts.map((item, index) => {
                return (
                    <View key={index}>
                        <View style={{ flexDirection: 'row' }}>
                            <View style={styles.signProcess}>
                                <View style={styles.cycleDot}></View>
                            </View>
                            <Text style={{ ...styles.title2, color: '#FF000A', lineHeight: 12 }}>Confirmations</Text>
                            <Text style={{ ...styles.title2, color: '#BFBFBF', lineHeight: 12 }}>
                                ({countData.noSignsCounts} of {countData.total})
                            </Text>
                        </View>
                        <View style={{ flexDirection: 'row' }}>
                            <View style={styles.signProcess}>
                                <View style={{ ...styles.divider, height: 71 * ratio, backgroundColor: '#0069F6' }}></View>
                            </View>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <Image source={PayWithArray[item.profileImg]} style={{ width: 40 * ratio, height: 40 * ratio }} />
                                <View style={{ marginLeft: 7 * ratio, justifyContent: 'center' }}>
                                    <Text style={styles.title1}>{item.label}</Text>
                                    <Text ellipsizeMode="middle" numberOfLines={1}
                                        style={{ ...styles.title2, width: 178 * ratio }}>
                                        {item.address}
                                    </Text>
                                </View>
                            </View>
                        </View>
                    </View>
                )
            })}
            {/* 签名完成展示执行人 */}
            {isSignFinish ?
                <View>
                    <View style={{ flexDirection: 'row' }}>
                        <View style={styles.signProcess}>
                            <View style={{ ...styles.cycleDot, borderColor: '#0069F6' }}></View>
                        </View>
                        <Text style={{ ...styles.title2, color: '#0069F6', lineHeight: 12 }}>Execute </Text>
                    </View>
                    <View style={{ flexDirection: 'row', marginTop: 17 * ratio, marginLeft: 44 * ratio }}>
                        <Image source={PayWithArray[executor.profileImg]} style={{ width: 40 * ratio, height: 40 * ratio }} />
                        <View style={{ marginLeft: 9 * ratio, justifyContent: 'center' }}>
                            <Text style={styles.title1}>{executor.label}</Text>
                            <Text ellipsizeMode="middle" numberOfLines={1}
                                style={{ ...styles.title2, width: 178 * ratio }}>
                                {executor.address}
                            </Text>
                        </View>
                    </View>
                </View> :
                <View>
                    <View style={{ flexDirection: 'row', }}>
                        <View style={styles.signProcess}>
                            <View style={{ ...styles.cycleDot, borderColor: '#BFBFBF' }}></View>
                        </View>
                        <Text style={{ ...styles.title2, color: '#BFBFBF', lineHeight: 12 }}>Execute </Text>
                        {isSign && <Text style={{ ...styles.title2, color: '#BFBFBF', lineHeight: 12 }}>
                            ({countData.noSignsCounts} more confirmations needed)
                        </Text>}
                    </View>
                    {!isSign && <Text style={{ ...styles.title2, color: '#BFBFBF', marginLeft: 40 * ratio, marginTop: 8 * ratio }}>
                        Can be exected once the threshold is reached
                    </Text>}
                </View>}
        </View>
    );
}

const styles = StyleSheet.create({
    signProcess: {
        width: 42 * ratio,
        alignItems: 'center'
    },
    divider: {
        width: 1,
        height: 22 * ratio,
        backgroundColor: '#0069F6'
    },
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 24
    },
    title2: {
        fontSize: 12,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#898989',
        lineHeight: 18
    },
    cycleDot: {
        width: 12 * ratio,
        height: 12 * ratio,
        borderRadius: 50,
        borderColor: '#FF000A',
        borderWidth: 1
    }
})

export default ConfirmationDetail;
